<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :model="filters" :inline="true">
        <el-form-item>
          <el-input v-model="filters.keywords" size="small" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" v-on:click="query" size="small" icon="el-icon-search">查询课程</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addHandler" size="small" icon="el-icon-notebook-1">新增课程</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onLineCourse" size="small" icon="el-icon-s-promotion">课程发布</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="offLineCourse" size="small" icon="el-icon-download">课程下架</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="killCourseModelView" size="small" icon="el-icon-sell">加入秒杀</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表v-loading="listLoading"-->
    <el-table @row-click="rowClick" :data="courses" v-loading="listLoading" @selection-change="selsChange"
              highlight-current-row style="width: 100%;">
      <!--多选框-->
      <el-table-column type="selection" width="55e">
      </el-table-column>
      <!--其他都设置值,只有一个不设置值就自动适应了-->
      <el-table-column prop="name" label="课程名称">
      </el-table-column>
      <el-table-column prop="chapterCount" label="章节数">
      </el-table-column>
      <!--<el-table-column prop="courseType.name" label="类型">-->
      <!--</el-table-column>-->
      <el-table-column prop="gradeName" label="等级">
      </el-table-column>
      <el-table-column prop="status" label="状态" :formatter="statusFormatter">
      </el-table-column>
      <el-table-column prop="forUser" label="适用人群" width="220">
      </el-table-column>
      <!--<el-table-column prop="tenantName" label="所属机构">-->
      <!--</el-table-column>-->
      <el-table-column prop="teacherNames" label="讲师" width="140">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template scope="scope">
          <el-button size="small" @click="edit(scope.row)" icon="el-icon-edit" type="primary">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.row)" icon="el-icon-remove">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0" icon="el-icon-remove" size="small">
        批量删除
      </el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total"
                     style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增界面-->
    <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false" width="860px">
      <el-form :inline="true" :model="addForm" label-width="80px" ref="addForm">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="addForm.name" placeholder="课程名称" auto-complete="off" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="适用人群" prop="forUser">
          <el-input v-model="addForm.forUser" placeholder="适用人群" auto-complete="off" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="课程类型" prop="courseTypeId">
          <el-cascader style="width: 300px"
                       :props="courseTypeProps"
                       v-model="addForm.courseTypeId"
                       placeholder="课程类型"
                       :options="courseTypes"
                       expand-trigger="hover"
                       :show-all-levels="false"
                       filterable
                       change-on-select
          ></el-cascader>
        </el-form-item>
        <el-form-item label="添加讲师" prop="teachers">
          <el-select v-model="addForm.teacharIds" multiple placeholder="可选多个讲师" style="width: 300px">
            <el-option
                v-for="item in teachers"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程周期">
          <el-date-picker style="width: 200px"
                          v-model="addForm.startTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          size="small"
                          placeholder="课程开始日期">
          </el-date-picker>
          -
          <el-date-picker style="width: 200px"
                          v-model="addForm.endTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          size="small"
                          placeholder="课程结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="购买可看">
          <el-input placeholder="可看天数" type="number" v-model="addForm.validDays" auto-complete="off"
                    style="width: 165px"/>&nbsp;天
        </el-form-item>

        <el-form-item label="课程等级" prop="courseTypeId" style="width: 700px">
          <el-radio-group v-model="addForm.gradeId">
            <el-radio v-for="grade in grades" :label="grade.id">{{ grade.name }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="logo" style="width: 400px">
          <!--<el-input type="text" v-model="employee.logo" auto-complete="off" placeholder="请输入logo！"></el-input>-->
          <!--
              action 提交地址
              data 你要上传的数据
              before-upload 上传之前要做的事情
              on-success   上传成功之后要做的事情
              limit  一次能上传多少张图片
              file-list 上传控件用来存放数据的
          -->
          <el-upload
              class="upload-demo"
              list-type="picture"
              action="http://ymcc-230627.oss-cn-chengdu.aliyuncs.com"
              :data="uploadPicData"
              :file-list="uploadPicDataList"
              :before-upload="beforePicUpload"
              :on-success="handlePicSuccess"
              :limit="1">
            <el-button size="small" type="primary" icon="el-icon-picture-outline">上传封面</el-button>
            &nbsp;&nbsp;<span slot="tip" class="el-upload__tip">支持500kb，格式jpg</span>
          </el-upload>
        </el-form-item>

        <el-form-item prop="logo">
          <!--<el-input type="text" v-model="employee.logo" auto-complete="off" placeholder="请输入logo！"></el-input>-->
          <el-upload
              class="upload-demo"
              action="http://ymcc-230627.oss-cn-chengdu.aliyuncs.com"
              :data="uploadZipData"
              :before-upload="beforeZipUpload"
              :file-list="uploadZipDataList"
              :on-success="handleZipSuccess"
              :limit="1">
            <el-button size="small" type="primary" icon="el-icon-upload">上传课件</el-button>
            &nbsp;&nbsp;<span slot="tip" class="el-upload__tip">支持压缩格式</span>
          </el-upload>
        </el-form-item>
        <el-divider></el-divider>

        <el-form-item label="收费规则" prop="gradeId" size="width:100%">
          <el-radio-group v-model="addForm.chargeId">
            <el-radio @change="changeCharge" v-for="charge in charges" :label="charge.id">{{ charge.name }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="课程价格" prop="price">
          <el-input :disabled="priceDisabled" type="number" v-model="addForm.price" auto-complete="off"
                    style="width: 185px"/>
        </el-form-item>
        <el-form-item label="课程原价">
          <el-input :disabled="priceDisabled" type="number" v-model="addForm.priceOld" auto-complete="off"
                    style="width: 185px"/>
        </el-form-item>

        <el-form-item label="咨询QQ" prop="qq">
          <el-input v-model="addForm.qq" auto-complete="off" style="width: 150px"></el-input>
        </el-form-item>


        <el-form-item label="课程简介" prop="description">
          <el-input style="width: 450px"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="addForm.description">
          </el-input>
        </el-form-item>

        <el-form-item label="课程详情" prop="intro">
          <div class="edit_container">
            <quill-editor
                v-model="addForm.intro"
                ref="myQuillEditor"
                class="editer"
                :options="editorOption"
                @ready="onEditorReady($event)">
            </quill-editor>
          </div>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false" icon="el-icon-remove">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" icon="el-icon-check">提交</el-button>
      </div>
    </el-dialog>


    <el-dialog title="添加秒杀课程" :visible.sync="killCourseFormVisible" :close-on-click-modal="false">
      <el-form :model="killCourseForm" label-width="80px" ref="addForm">
        <el-form-item label="课程名字" prop="price">
          <el-input :disabled="true" v-model="killCourseForm.courseName" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="秒杀活动" prop="activityId">
          <el-select v-model="killCourseForm.activityId" placeholder="请选择秒杀活动">
            <el-option v-for="item in killActivitys"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.timeStr }}</span>
            </el-option>
          </el-select>
          &nbsp;&nbsp;秒杀课程加入秒杀活动，秒杀时间以活动时间为准
        </el-form-item>

        <el-form-item label="秒杀价格" prop="price">
          <el-input v-model="killCourseForm.killPrice" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="秒杀数量" prop="name">
          <el-input v-model="killCourseForm.killCount" auto-complete="off"></el-input>
        </el-form-item>
        <!--
        <el-form-item label="时间范围" >
          <el-date-picker
              v-model="killCourseForm.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              placeholder="秒杀开始日期">
          </el-date-picker>

          <el-date-picker
              v-model="killCourseForm.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              placeholder="秒杀结束日期">
          </el-date-picker>
        </el-form-item>
        -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="killCourseFormVisible = false" icon="el-icon-remove">取消</el-button>
        <el-button type="primary" @click.native="addKillCourseSubmit" icon="el-icon-check">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {quillEditor} from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"

export default {
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  components: {//使用编辑器
    quillEditor
  },
  data() {
    return {
      uploadPicData: {},
      uploadPicDataList:[],
      uploadZipData: {},
      uploadZipDataList:[],
      uploadResource: {
        courseId: 1,
        paths: []
      },
      row: "",
      courseTypeProps: {
        value: "id",
        label: "name"
      },
      priceDisabled: true,
      editorOption: {},//富文本编辑框配置
      grades: [
        {id: 1, name: "青铜"}, {id: 2, name: "白银"}, {id: 3, name: "黄金"}, {id: 4, name: "白金"}, {
          id: 5,
          name: "钻石"
        }
      ],
      charges: [
        {"id": 1, "name": "免费"},
        {"id": 2, "name": "收费"}
      ],
      teachers: [],
      courseTypes: [],
      addFormVisible: false,
      //images:[xxx.jgp,xxxx,jpg,xxxx.jpg],
      killActivitys: [],
      addForm: {
        id:null,
        startTime: '',
        endTime: '',
        validDays: '',
        name: '',
        forUser: '',
        gradeId: 1,
        teacharIds: '',
        courseTypeId: '',
        description: '',
        intro: '',
        chargeId: 1,
        price: '',
        priceOld: '',
        qq: '',
        pic: '',
        zipResources: ''
      },
      listLoading: false,
      //查询对象
      filters: {
        keywords: ''
      },
      page: 1,//当前页,要传递到后台的
      total: 0, //分页总数
      courses: [], //当前页数据
      killCourseIds:[],//秒杀
      courseIds:[],
      sels: '',
      //秒杀相关================
      killCourseFormVisible: false,
      killCourseForm: {
        courseId: "",
        killCount: "",
        startTime: "",
        endTime: "",
        killPrice: "",
        courseName: "",
        coursePic: "",
        teacherNames: "",
        activityId: "",
      },
    }
  },
  methods: {
    //秒杀相关
    getKillActivitys() {
      this.$http.get("/kill/killActivity/list").then(result => {
        let {data, success, message} = result.data;
        if (success) {
          this.killActivitys = data;
        } else {
          this.$message({message: message, type: 'error'});
        }
      }).catch(error => {
        this.$message({message: error.message, type: 'error'});
      });
    },
    killCourseModelView() {
      //获取选中的行
      if (!this.killCourseIds) {
        this.$message({message: '老铁，请选择数据', type: 'error'});
        return;
      }
      if(this.killCourseIds.length !== 1){
        this.$message({message: '老铁，请选择1条数据', type: 'error'});
        return;
      }
      this.killCourseForm.killCount = "";
      this.killCourseForm.killPrice = "";
      this.killCourseForm.startTime = "";
      this.killCourseForm.endTime = "";
      console.log(this.courseIds[0])
      this.killCourseForm.courseId = this.killCourseIds[0].id;
      this.killCourseForm.courseName = this.killCourseIds[0].name;
      this.killCourseForm.coursePic = this.killCourseIds[0].pic;
      this.killCourseForm.teacherNames = this.killCourseIds[0].teacherNames;
      this.killCourseFormVisible = true;
    },
    addKillCourseSubmit() {
      this.$http.post("/kill/killCourse/save", this.killCourseForm).then(res => {
        var ajaxResult = res.data;
        if (ajaxResult.success) {
          this.$message({
            message: '加入秒杀成功，请在秒杀中心查看!',
            type: 'success'
          });
          this.killCourseFormVisible = false;
          //this.getCourses();
        } else {
          this.$message({message: ajaxResult.message, type: 'error'});
        }
      }).catch(error => {
        this.$message({message: '保存失败!', type: 'error'});
      })
    },
    async getSign(data) {
      //让这个请求变成同步请求
      await this.$http.get("/common/oss/sign").then(response => {
        //设置相关的参数
        var resultObj = response.data.data;
        data.policy = resultObj.policy;
        data.signature = resultObj.signature;
        data.ossaccessKeyId = resultObj.accessid;
        data.dir = resultObj.dir;
        data.host = resultObj.host;
        //上传的文件名，使用UUID处理一下  ${filename} 占位符
        data.key = resultObj.dir + '/' + this.getUUID() + '_${filename}';
      });
    },
    //文件上传===============================================================
    getUUID() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";
      var uuid = s.join("");
      return uuid;
    },
    async beforePicUpload() {
      //必须要等await 执行完成之后在执行
      await this.getSign(this.uploadPicData);
    },
    async beforeZipUpload() {
      await this.getSign(this.uploadZipData);
    },
    handlePicSuccess(res, file) {
      //上传的完整的文件地址 ： https://java1030.oss-cn-chengdu.aliyuncs.com/ymcc393olajewfjaolfja.jpg
      var urlPath = this.uploadPicData.host + '/' + this.uploadPicData.key.replace("${filename}", file.name);
      this.addForm.pic = urlPath;
      this.$message({message: '上传成功', type: 'success'});
    },
    handleZipSuccess(res, file) {
      //上传的完整的文件地址
      var urlPath = this.uploadZipData.host + '/' + this.uploadZipData.key.replace("${filename}", file.name);
      this.addForm.zipResources = urlPath;
      this.$message({message: '上传成功', type: 'success'});
    },
    addSubmit() {
      //获取当前数组里面的最后一个
      this.addForm.courseTypeId = this.addForm.courseTypeId[this.addForm.courseTypeId.length - 1];
      //获取等级名字
      var gradeName;
      for (var i = 0; i < this.grades.length; i++) {
        var grade = this.grades[i];
        if (grade.id === this.addForm.gradeId) {
          gradeName = grade.name;
          break;
        }
      }

      var param = {
        course: {
          id : this.addForm.id,
          courseTypeId: this.addForm.courseTypeId,
          name: this.addForm.name,
          forUser: this.addForm.forUser,
          gradeId: this.addForm.gradeId,
          gradeName: gradeName,
          pic: this.addForm.pic,
          startTime: this.addForm.startTime,
          endTime: this.addForm.endTime
        },
        courseDetail: {
          description: this.addForm.description,
          intro: this.addForm.intro
        },
        courseMarket: {
          charge: this.addForm.chargeId,
          qq: this.addForm.qq,
          price: this.addForm.price,
          priceOld: this.addForm.priceOld,
          validDays: this.addForm.validDays
        },
        courseResource: {
          resources: this.addForm.zipResources,
          type: 0	//课件
        },
        teacharIds: this.addForm.teacharIds
      };

      this.$http.post("/course/course/save", param).then(res => {
        var ajaxResult = res.data;
        if (ajaxResult.success) {
          this.$message({
            message: '保存成功!',
            type: 'success'
          });
          this.addFormVisible = false;
          this.getCourses();
        } else {
          this.$message({
            message: '提交失败[' + res.data.message + "]",
            type: 'error'
          });
        }
      });
    },
    getGrades() {
      this.$http.get("/system/systemdictionaryitem/listBySn/dj").then(result => {
        this.grades = result.data.data;
      });
    },
    getCourseTypes() {
      this.$http.get("/course/courseType/courseTree").then(result => {
        this.courseTypes = result.data.data;
      });
    },
    changeCharge(chargeId) {
      if (chargeId === 1) {
        this.priceDisabled = true;
        this.addForm.price = "";
        this.addForm.priceOld = "";
      } else {
        this.priceDisabled = false;
      }
    },
    onEditorReady(editor) {
      //当富文本编辑框初始化好执行
    },
    addHandler() {
      this.addForm = {}
      this.addForm.chargeId = 1
      this.addForm.gradeId = 1
      //this.uploadPicData = {} 没有用的
      this.uploadPicDataList = []
      this.addFormVisible = true;//打开弹框
    },
    handleCurrentChange(curentPage) {
      this.page = curentPage;
      this.getCourses();
    },
    query(){
      this.page = 1;
      this.getCourses();
    },
    getCourses() {
      //发送Ajax请求后台获取数据  axios
      //添加分页条件及高级查询条件
      let para = {
        "pageNo": this.page,
        "keyword": this.filters.keywords
      };
      this.listLoading = true; //显示加载圈
      //分页查询
      this.$http.post("/course/course/pagelist", para).then(result => {
        this.total = result.data.data.total;
        this.courses = result.data.data.rows;
        this.listLoading = false;  //关闭加载圈
      }).catch(error => {
        this.$message({message: error.message, type: 'error'});
      });
    },
    onLineCourse() {
      //获取选中的行
      if (!this.courseIds || this.courseIds.length < 1) {
        this.$message({message: '老铁，你不选中数据，臣妾上不了啊....', type: 'error'});
        return;
      }

      this.$http.post("/course/course/onLineCourse" , this.courseIds).then(res => {
        var ajaxResult = res.data;
        if (ajaxResult.success) {
          this.$message({message: '老铁，上线成功.', type: 'success'});
          this.getCourses();
        } else {
          this.$message({message: ajaxResult.message, type: 'error'});
        }
      }).catch(error => {
        this.$message({message: error.message, type: 'error'});
      });
    },
    offLineCourse() {
      //获取选中的行
      if (!this.row || this.row === "") {
        this.$message({message: '老铁，你不选中数据，臣妾下不了啊....', type: 'error'});
        return;
      }

      this.$http.post("/course/course/offLineCourse/" + this.row.id).then(res => {
        var ajaxResult = res.data;
        if (ajaxResult.success) {
          this.$message({message: '老铁，下线成功.', type: 'success'});
          this.getCourses();
        } else {
          this.$message({message: ajaxResult.message, type: 'error'});
        }
      })
    },
    rowClick(row) {
      this.row = row;
    },
    statusFormatter: function (row, column) {
      return row.status == 1 ? '已上线' : '未上线';
    },

    //讲师
    getTeachers() {
      this.$http.get("/course/teacher/list")
          .then(result => {
            this.teachers = result.data.data;
            console.log(this.teachers)
          }).catch(error => {
        this.$message({message: error.message, type: 'error'});
      });
    },
    edit(row) {
      var id = row.id;
      //发送一个请求 去后台获取数据
      this.$http.get("/course/course/courseInfo/"+id).then(res=>{
          this.addFormVisible = true;//打开弹框
          this.addForm = res.data.data.course

          this.addForm.id = id;

          //回显讲师多选下拉框  一个数组
          if(res.data.data.teacharIds){
            this.addForm.teacharIds = res.data.data.teacharIds
          }

        //回显课程封面图 el-upload
        var pic = res.data.data.course.pic;
        if(pic){
          this.uploadPicDataList = []  //先清空一下
          this.uploadPicDataList.push({
            name: pic.substr(pic.lastIndexOf("/")+1),
            url: pic
          })
        }

        //回显课程类别级联框
        if(res.data.data.courseType){
          let pathIds = res.data.data.courseType.path.split(".")
          pathIds = pathIds.map(ctid => parseInt(ctid))  //循环遍历数组，将每个字符串转化为整数 重新封装到一个新数组中
          this.addForm.courseTypeId = pathIds
        }

        console.log(res)
        //回显课程的课件资源
        if(res.data.data.courseResource){
          this.uploadZipDataList = []  //先清空一下
          var resource = res.data.data.courseResource
          if(resource.resources){
            this.uploadZipDataList.push({
              name: resource.resources.substr(resource.resources.lastIndexOf("/")+1),
              url: resource.resources
            })
          }
        }
          //回显课程市场营销信息
          this.addForm.chargeId = res.data.data.courseMarket.charge
          if (this.addForm.chargeId === 1) {
            this.priceDisabled = true;
            this.addForm.price = "";
            this.addForm.priceOld = "";
          } else {
            this.priceDisabled = false;
          }
          this.addForm.qq = res.data.data.courseMarket.qq
          this.addForm.price = res.data.data.courseMarket.price
          this.addForm.priceOld = res.data.data.courseMarket.priceOld
          this.addForm.validDays = res.data.data.courseMarket.validDays

          //回显课程详情信息
          this.addForm.description = res.data.data.courseDetail.description
          this.addForm.intro = res.data.data.courseDetail.intro


      })

    },
    del() {
      this.$message({message: "功能未开放", type: 'error'});
    },
    batchRemove() {
      this.$message({message: "功能未开放", type: 'error'});
    },
    selsChange(sels) {
      this.sels = sels;
      if(sels){
        //获取id  只管赋值
        this.courseIds = sels.map(item => item.id)
        this.killCourseIds = sels
      }
    },
  },

  mounted() {
    this.getCourses();
    //this.getGrades();
    this.getCourseTypes();
    this.getTeachers();
    this.getKillActivitys();
  }
}

</script>

<style scoped>

</style>